Unstyled Component Libraries

So, earlier in this module, we talked about how component libraries like React Bootstrap and Material UI aren't often used by product companies, because they come with their own built-in design system.

As we've come to learn, however, building UI components from scratch can be surprisingly challenging. Libraries like Material UI come with robust, battle-tested components for things like modals, , and dropdowns.

Fortunately, we can separate the baby from the bathwater with unstyled component libraries.

Simply put, these libraries are focused purely on the mechanics and usability. Often, accessibility is a first-class concern. They have no built-in design system, and the few styles that are included can easily be overridden.

Let's talk about some of the most popular options.

Mix and match! (info)

Because these libraries are unstyled, you don't need to pick one and stick with it. We can "mix and match" components from multiple libraries!

But won't it bloat our JavaScript bundles to depend on multiple component libraries? Fortunately not! All of the libraries we're going to talk about here support “tree-shaking”, which means our bundles only include the specific components we import. There might be some small additional cost from mixing components from multiple libraries (eg. if they depend on different lower-level packages), but this has been pretty minimal in my experience.

Why would we want to mix and match? I can think of two good reasons:

We can assemble our own collection of our favourite components.
If the package we choose becomes unmaintained, we can gradually migrate to a newer solution, one component at a time. We don't have to drop everything else and spend weeks moving everything over!

Reach UI

Reach UI is one of the earliest libraries in this category, and the one I've used the most in my projects.

It was created by Ryan Florence, and it has a heavy focus on accessibility. As he was building this library, he spent an hour or two every day using a screen reader, learning how the software works in order to build robust, usable components.

Ryan Florence

@ryanflorence

"What does your dad do for work?"

My kids: "Lately, his computer just talks to him in weird fast voices and he has his eyes closed"

Sept 4, 2018

427

6 people are Tweeting about this

Unfortunately, it hasn't been actively maintained recently. It has become incompatible with React 18, and the sole remaining maintainer has been suggesting that folks use a different option.

Radix Primitives

Radix Primitives is a library of unstyled, accessible components. It's an incredibly rich library, with a ton of components I've never seen anywhere else.

For example, <ContextMenu>, for building right-click context menus:

(In their docs, the components are shown with styles, but those styles aren't actually included with the component library, they're for demonstration purposes only.)

It's maintained by the team at WorkOS, and I've been very impressed with the team. I opened an issue with an accessibility concern, and it was addressed super quickly.

This is my first choice right now, my primary recommendation. On this course platform, I plan on gradually moving over from Reach UI to Radix Primitives. I've had nothing but good experiences so far.

Headless UI

Headless UI is another unstyled, accessibility-focused component library.

It's maintained by the team at Tailwind Labs, and is primarily intended to be used with Tailwind (though this absolutely isn't a hard requirement!).

Interestingly, Headless UI contains bindings for both React and Vue. If you happen to work with both tools across different projects, this could come in handy!

This library includes a relatively modest collection of components; as I write this, Headless UI has 10 components, while Radix Primitives has 31. But each included component is well-thought-out, and a joy to use.

Ariakit

Ariakit is yet another accessible unstyled component library.

It's built by Diego Haz, creator of Reakit. Ariakit is essentially a spiritual successor to this earlier library.

Of all the libraries in this list, I know the least about Ariakit. It offers 23 components, and from what I can tell, they seem to offer a really nice API! Interestingly, they offer custom hooks that let you access the internal state of their components.

I'm excited to see how this library develops over time!

React Aria

The final library I'd like to talk about is a bit different — it's not actually a component library. It's lower-level than that.

React Aria is a library of React custom hooks that can be used to build a component library. It's created and maintained by Adobe.

Adobe also has a separate library, React Spectrum. React Spectrum is a styled component library, using Adobe's design system. Interestingly, React Spectrum is built using React Aria.

The idea is that we could build our own component library, using our own design system, by leveraging the suite of custom hooks provided by React Aria.

Honestly, I probably wouldn't recommend going this route. It's an interesting idea, but it seems like a heck of a lot more work. Adobe has its own mini ecosystem here, with libraries like React Stately for state management, as well as their own custom event system.

Base UI

Base UI is an unstyled component library for React.

The cool thing about Base UI is that it's built by the Material UI team, and is essentially an unstyled version of Material UI, one of the most popular component libraries for React.

Material UI is (I believe) the most widely-used component library in the entire React ecosystem. Millions of internet users interact with Material UI components every day, finding and reporting edge-case bugs. Since Material UI uses Base UI internally, we get all of the benefits of that battle testing, without having to adopt any of the Material UI styles.

I haven't personally used Base UI yet myself, but I think it's likely a great choice!